<template>
	<view :data-theme="theme" class="page">
		<useNavBar
			bgColor="#fff"
			color="#0A0A0C"
			:title="$t(`page.users.login.editM`)"
		></useNavBar>
		<view class="ChangePassword">
			<view v-if="current == 0">
				<view class="shading">{{ $t(`page.users.login.forget`) }}</view>
				<!-- <view class="shading_desc">{{
					$t(`page.users.login.placeEmail`)
				}}</view> -->
				<view class="list">
					<div class="item">
						<div class="acea-row row-middle">
							<text class="iconfont icon-youxiang"></text>
							<input
								type="text"
								class="texts"
								:placeholder="$t(`page.users.login.placeEmail`)"
								v-model="email"
							/>
						</div>
					</div>
				</view>
				<button form-type="submit" class="confirmBnt bg_color" @click="next">
					{{ $t(`page.users.login.next`) }}
				</button>
			</view>
			<view v-if="current == 1">
				<view class="shading mb-50" v-if="type == 'resetPhone'">{{
					$t(`page.users.login.phoneVer`)
				}}</view>
				<view
					class="shading"
					v-if="type == 'forgetemail' || type == 'resetEmail'"
					>{{ $t(`page.users.login.emailVer`) }}</view
				>
				<!-- v-if="type == 'forgetemail'" -->
				<view class="shading_desc" v-if="type == 'forgetemail'"
					>{{ $t(`page.users.login.verDesc`) }}
					<text class="font_color">{{ email }}</text>
				</view>

				<view class="list">
					<div class="item pos">
						<div class="acea-row row-middle">
							<text class="iconfont icon-yanzhengma"></text>
							<input
								type="number"
								class="texts"
								:placeholder="$t(`page.users.register.placeCode`)"
								v-model="captcha"
								required
							/>
							<view
								class="Resend pos-rc"
								:disabled="disabled"
								@click="code()"
								>{{ text }}</view
							>
						</div>
					</div>
					<div class="item">
						<div class="acea-row row-middle">
							<text class="iconfont icon-mima"></text>
							<input
								type="password"
								maxlength="20"
								class="texts"
								:placeholder="$t(`page.users.login.placePasd2`)"
								v-model="password"
							/>
						</div>
					</div>
					<div class="item">
						<div class="acea-row row-middle">
							<text class="iconfont icon-mima"></text>
							<input
								type="password"
								maxlength="20"
								class="texts"
								:placeholder="$t(`page.users.login.Pasdagain`)"
								v-model="password1"
							/>
						</div>
					</div>
				</view>
				<button form-type="submit" class="confirmBnt bg_color" @click="editPwd">
					{{ $t(`page.users.login.submit`) }}
				</button>
			</view>
		</view>
		<tui-modal
			:show="modal"
			@click="handleClick"
			@cancel="hide"
			:title="$t(`message.login.prompt`)"
			:content="$t(`message.login.loginSure`)"
		></tui-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import sendVerifyCode from "@/mixins/SendVerifyCode";
import { mapState } from "pinia";
import tuiModal from "@/components/tui-modal/tui-modal";
import {
	emailForgetCode,
	emailCaptcheReset,
	phoneCaptcheReset,
	emailResetPassword,
	phoneUpdatePassword,
	getLogout,
	mobilePassword,
	getUserInfo,
	loginEmail,
	emailUpdatePassword,
} from "@/api/user";
import { Debounce, isEmail } from "@/utils/validate.js";
import { useAppStore } from "@/stores/app";
const appStore = useAppStore();
const app = getApp();
export default {
	mixins: [sendVerifyCode],
	data() {
		return {
			current: 0,
			captcha: "",
			email: "",
			phone: "",
			password: "",
			password1: "",
			type: "",
			modal: false,
			countryCode: uni.getStorageSync("countryCode"),
			theme: "theme3",
		};
	},
	components: {
		tuiModal,
	},
	computed: mapState(useAppStore, ["isLogin", "userInfo"]),
	onLoad(e) {
		uni.setNavigationBarTitle({
			title: this.$t(`page.users.userInfo.password`),
		});
		let that = this;
		if (e.scene == "reset" && e.type == "email") {
			this.type = "resetEmail";
			this.email = this.userInfo.email;
			this.current = 1;
		} else if (e.scene == "reset" && e.type == "phone") {
			this.type = "resetPhone";
			this.phone = this.userInfo.phone;
			this.current = 1;
		} else if (e.scene == "forget" && e.type == "email") {
			this.type = "forgetemail";
		}
	},
	methods: {
		returns() {
			uni.navigateBack();
		},
		next() {
			let that = this;
			if (!that.email)
				return that.$util.Tips({
					title: this.$t(`message.login.emailEmpty`),
				});
			if (!isEmail(that.email))
				return that.$util.Tips({
					title: this.$t(`message.login.correctEmail`),
				});
			that.current = 1;
		},
		handleClick(e) {
			let index = e.index,
				that = this;
			if (index === 1) {
				if (that.type == "resetPhone") {
					mobilePassword({
						countryCode: "+" + that.countryCode,
						password: that.password,
						phone: that.phone,
					})
						.then((res) => {
							let data = res.data;
							let newTime = Math.round(new Date() / 1000);

							appStore.LOGIN({
								token: res.data.token,
							});
							that.getUserInfo(data);
						})
						.catch((err) => {
							return that.$util.Tips({
								title: err,
							});
						});
				} else if (that.type == "resetEmail") {
					loginEmail({
						email: that.email,
						password: that.password,
					})
						.then(({ data }) => {
							appStore.LOGIN({
								token: data.token,
							});
							that.getUserInfo(data);
						})
						.catch((e) => {
							that.$util.Tips({
								title: e,
							});
						});
				}
			} else {
				uni.reLaunch({
					url: "/pages/index/index",
				});
			}
			this.hide();
		},
		hide() {
			this.modal = false;
			uni.navigateTo({
				url: "/pages/users/login/index?isToLogin=isToLogin",
			});
		},
		getUserInfo(data) {
			let that = this;
			appStore.SETUID(data.uid);
			getUserInfo().then((res) => {
				uni.hideLoading();
				appStore.UPDATE_USERINFO(res.data);
				return that.$util.Tips(
					{
						title: "Операция выполнена.",
						icon: "success",
					},
					{
						tab: 4,
						url: "/pages/index/index",
					}
				);
			});
		},
		editPwd: Debounce(function () {
			let that = this;
			if (!that.captcha)
				return that.$util.Tips({
					title: this.$t(`message.login.emptyCaptche`),
				});
			if (!that.password)
				return that.$util.Tips({
					title: this.$t(`message.login.emptyPassword`),
				});
			if (!that.password1)
				return that.$util.Tips({
					title: this.$t(`message.login.againPassword`),
				});
			if (that.password !== that.password1)
				return that.$util.Tips({
					title: this.$t(`message.login.diffPassword`),
				});
			// forgetemail忘记邮箱密码
			if (that.type == "forgetemail") {
				emailResetPassword({
					captcha: that.captcha,
					email: that.email,
					newPassword: that.password,
					passwordAgain: that.password1,
				})
					.then((res) => {
						return that.$util.Tips(
							{
								title: this.$t(`message.login.resetSuccess`),
								icon: "success",
							},
							{
								tab: 4,
								url: "/pages/users/login/index",
							}
						);
					})
					.catch((err) => {
						this.$refs.uToast.show({
							message: err,
						});
					});
			} else if (that.userInfo.userType == "email") {
				uni.showLoading({
					title: this.$t(`message.tips.loding`),
				});
				emailUpdatePassword({
					captcha: that.captcha,
					newPassword: that.password,
					passwordAgain: that.password1,
				})
					.then((res) => {
						uni.hideLoading();
						that.$util.Tips({
							title: res.message,
							icon: "success",
						});
						that.getLogout();
					})
					.catch((err) => {
						uni.hideLoading();
						this.$refs.uToast.show({
							message: err,
						});
					});
			} else if (that.userInfo.userType == "phone") {
				uni.showLoading({
					title: this.$t(`message.tips.loding`),
				});
				phoneUpdatePassword({
					captcha: that.captcha,
					newPassword: that.password,
					passwordAgain: that.password1,
				})
					.then((res) => {
						uni.hideLoading();
						that.$util.Tips({
							title: res.message,
							icon: "success",
						});
						that.getLogout();
					})
					.catch((err) => {
						uni.hideLoading();
						this.$refs.uToast.show({
							message: err,
						});
					});
			}
		}),
		getLogout() {
			getLogout()
				.then((res) => {
					this.modal = true;
					appStore.LOGOUT();
				})
				.catch((err) => {
					console.log(err);
				});
		},
		code: Debounce(function () {
			let that = this;
			if (that.type == "resetEmail") {
				if (that.disabled) return;
				emailCaptcheReset({ email: that.email })
					.then((res) => {
						that.$util.Tips({ title: res.message });
						that.sendCode();
					})
					.catch((err) => {
						this.$refs.uToast.show({
							message: err,
						});
					});
			} else if (that.type == "resetPhone") {
				if (that.disabled) return;
				phoneCaptcheReset({ phone: that.phone })
					.then((res) => {
						that.$util.Tips({ title: res.message });
						that.sendCode();
					})
					.catch((err) => {
						this.$refs.uToast.show({
							message: err,
						});
					});
			} else if (that.type == "forgetemail") {
				if (that.disabled) return;
				emailForgetCode(that.email)
					.then((res) => {
						that.$util.Tips({ title: res.message });
						that.sendCode();
					})
					.catch((err) => {
						this.$refs.uToast.show({
							message: err,
						});
					});
			}
		}),
	},
};
</script>

<style lang="scss" scoped>
.shading {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	font-size: 36rpx;
	font-weight: 500;
	color: #0a0a0c;
	line-height: 50rpx;
	border-radius: 20rpx;
	padding: 72rpx 30rpx 0;
}
.shading_desc {
	padding: 0 30rpx;
	margin-top: 16rpx;
	text-align: center;
	font-size: 24rpx;
	// font-weight: 400;
	color: #666677;
	line-height: 40rpx;
}
.page {
	background: #f2f3f6;
	// background: green;
	padding: 24rpx;
	min-height: 100vh;
}
.ChangePassword {
	background: #fff;
	border-radius: 20rpx;
	padding-bottom: 64rpx;
	.phone {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-top: 55rpx;
	}
}
.acea-row.row-middle {
	input {
		margin-left: 20rpx;
		display: block;
	}
}
.list {
	border-radius: 16rpx;
	overflow: hidden;
	margin-top: 48rpx;
	margin-bottom: 80rpx;
	padding: 0 30rpx 0;

	.item {
		border-bottom: 1px solid #f0f0f0;

		.iconfont {
			font-size: 30rpx;
			color: #b4b4b4;
		}

		.row-middle {
			position: relative;
			padding: 16rpx 0;

			.texts {
				flex: 1;
				font-size: 28rpx;
				height: 80rpx;
				line-height: 80rpx;
				// display: flex;
				// justify-content: center;
				// align-items: center;
			}

			input {
				flex: 1;
				font-size: 28rpx;
				height: 80rpx;
				line-height: 80rpx;
				// display: flex;
				// justify-content: center;
				// align-items: center;
			}

			.Resend {
				height: 48rpx;
				padding: 0 10rpx 0;
				line-height: 40rpx;
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				border-radius: 24rpx;
				@include main_color(theme);
				@include coupons_border_color(theme);
			}
		}
	}

	.forget {
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		margin-top: 24rpx;
		text-align: right;
	}
}

.ChangePassword .confirmBnt {
	font-size: 32rpx;
	width: 580rpx;
	height: 90rpx;
	border-radius: 45rpx;
	color: #fff;
	margin: 92rpx auto 0 auto;
	text-align: center;
	line-height: 90rpx;
}
.mb-50 {
	margin-bottom: 50rpx;
}
.bg_color {
	@include main_bg_color(theme);
}
.font_color {
	@include main_color(theme);
}
:deep(.uni-input-placeholder) {
	font-size: 32rpx;
	font-weight: 300;
}
</style>
<style></style>
